<template>

    <echart :options="option" class="echarts"></echart>

</template>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  border-radius: 25px;
}
</style>

<script>
var date = [[0.81], [0.9], [0.2]];
var lableStyle = {
  normal: {
    color: "white",
    insideColor: "white",
    fontSize:30
  }
};
var outlineStyle = {
  show: true,
  borderDistance: 8,
  itemStyle: {
    color: "none",
    borderColor: "#1f5888",
    borderWidth: 8
  }
};
export default {
  data: function() {
    return {
      option: {
        backgroundColor: "#0D2A42",
        title: [
          {
          text: "核心交换机性能                              ",
          x: "4%",
          y: "2%",
          backgroundColor:"#0A3C60",
          textStyle: {
            fontWeight: "normal",
            fontSize: 20,
            color: "#fff"
          }
          },
          {
            text: "CPU",
            textStyle: {
              fontSize: 15,
              color: "#fff"
            },
            left: "14%",
            top: "68%",
            textAlign: "center",
            textBaseAlign: "middle"
          },
          {
            text: "内存",
            textStyle: {
              fontSize: 15,
              color: "#fff"
            },
            left: "44%",
            top: "68%",
            textAlign: "center",
            textBaseAlign: "middle"
          },
          {
            text: "闪存",
            textStyle: {
              fontSize: 15,
              color: "#fff"
            },
            left: "74%",
            top: "68%",
            textAlign: "center",
            textBaseAlign: "middle"
          }
        ],
        series: [
          {
            type: "liquidFill",
            data: date[0],
            label: lableStyle,
            radius: "30%",
            shape: "rect",
            // 水球颜色
            color: ["#1f5888"],
            center: ["15%", "50%"],
            // 内图 背景色 边
            backgroundStyle: {
              color: "#0D2A42"
            },
            outline: outlineStyle
          },
          {
            type: "liquidFill",
            data: date[1],
            label: lableStyle,
            shape: "rect",
            radius: "30%",
            // 水球颜色
            color: ["#1f5888"],
            center: ["45%", "50%"],
            // 内图 背景色 边
            backgroundStyle: {
              color: "#0D2A42"
            },
            outline: outlineStyle
          },
          {
            type: "liquidFill",
            data: date[2],
            label: lableStyle,
            shape: "rect",
            radius: "30%",
            // 水球颜色
            color: ["#1f5888"],
            center: ["75%", "50%"],
            // 内图 背景色 边
            backgroundStyle: {
              color: "#0D2A42"
            },
            outline: outlineStyle
          }
        ]
      }
    };
  }
};
</script>
